<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="出库单号">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.stockOutCode"
            />
          </a-form-item>
          <a-form-item label="客户">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.customName"
            />
          </a-form-item>
          <a-form-item label="客户订单号">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.customOrderCode"
            />
          </a-form-item>
          <!-- <a-form-item label="车牌号">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.carPlate" />
          </a-form-item> -->
          <!-- <a-form-item label="出库类型">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.stockOutType"
            />
          </a-form-item> -->
          <CorporateSectorCascader
            :configCascader="configCascader2"
            @changeCascader="changeCascader2"
          />

          <a-form-item label="仓库" label-col-flex="65px">
            <a-select
              popup-container="html"
              class="bacClass"
              :style="{ width: '230px' }"
              v-model="query.warehouseName"
              :disabled="query.companyName == ''"
              allow-clear
            >
              <a-option
                v-for="item in pageData.inShelveList2"
                :key="item.id"
                :value="item.warehouseName"
              >
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button type="success" :icon="CirclePlus" @click="newDelivery">新增出库</el-button>
          <el-button plain :icon="Edit" @click="modify">修改</el-button>
          <el-button plain :icon="EditPen" @click="audit">审核</el-button>
          <el-button plain :icon="Delete" @click="deleteData">删除</el-button>
          <el-button plain :icon="Printer" @click="printVisibel">打印</el-button>
        </a-space>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <encapsulation-agrid
        v-loading="pageData.loadingUp"
        ref="refgridOption"
        :configaggrid="configaggrid"
      ></encapsulation-agrid>
    </template>
    <a-drawer
      popup-container=".page-table-layout"
      cancel-text="关闭"
      ok-text="确认"
      height="90vh"
      placement="bottom"
      :visible="pageData.showAdd"
      unmountOnClose
      @cancel="pageData.showAdd = false"
      @ok="pageData.showAdd = false"
      :mask-closable="false"
    >
      <template #title> 明细</template>
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid
          ref="refgridOption1"
          :configaggrid="configaggrid1"
        ></encapsulation-agrid>
      </div>
    </a-drawer>
    <a-drawer
      popup-container=".page-table-layout"
      cancel-text="关闭"
      ok-text="保存"
      height="90vh"
      placement="bottom"
      :visible="pageData.showAdd1"
      unmountOnClose
      @cancel="pageData.showAdd1 = false"
      :mask-closable="false"
      @ok="addInventory(ruleFormRef)"
    >
      <template #title> {{ pageData.type == '修改' ? '修改' : '新增' }}出库</template>
      <div style="width: 100%; height: 95%" v-loading="pageData.loading1">
        <el-form
          ref="ruleFormRef"
          :model="query1"
          label-width="60px"
          class="demo-query"
          status-icon
        >
          <el-row :gutter="20">
            <el-col :span="5">
              <!-- <CorporateSectorCascader ref="cascaderRef" :configCascader="configCascader"
                @changeCascader="changeCascader" /> -->
              <el-form-item label="公司" label-width="80px" prop="companyName">
                <el-input v-model="query1.companyName" disabled style="width: 200px" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="仓库"
                :rules="[{ required: true, message: '仓库必选' }]"
                prop="warehouseId"
              >
                <el-select
                  v-model="query1.warehouseId"
                  @focus="focusShelve"
                  filterable
                  placeholder="选择仓库"
                  :disabled="!query1.companyId || pageData.type == '修改'"
                >
                  <el-option
                    v-for="item in pageData.inShelveList"
                    :key="item.id"
                    :label="item.warehouseName"
                    :value="item.id"
                    :loading="pageData.loading"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <CorporateSectorCascader
                ref="cascaderRef"
                :configCascader="configCascader"
                @changeCascader="changeCascader"
              />
            </el-col>

            <el-col :span="5">
              <el-form-item
                label-width="120px"
                label="收货仓库类型"
                :rules="[{ required: true, message: '收货仓库类型必选' }]"
                prop="deliveryWarehouseTypeName"
              >
                <el-select
                  v-model="query1.deliveryWarehouseTypeName"
                  @focus="focusShelveOP2"
                  filterable
                  placeholder="选择收货仓库类型"
                  @change="changeOP1"
                >
                  <el-option
                    v-for="item in pageData.inShelveListOP2"
                    :key="item.typeName"
                    :label="item.typeName"
                    :value="item.typeName"
                    :loading="pageData.loading"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="收货仓库"
                label-width="80px"
                :rules="[{ required: true, message: '收货仓库必选' }]"
                prop="deliveryWarehouseId"
              >
                <el-select
                  v-model="query1.deliveryWarehouseId"
                  @focus="focusShelveOP1"
                  filterable
                  placeholder="选择收货仓库"
                  :disabled="!query1.deliveryWarehouseTypeName"
                  @change="changeOP"
                >
                  <el-option
                    v-for="item in pageData.inShelveListOP1"
                    :key="item.id"
                    :label="item.warehouseName"
                    :value="item.id"
                    :loading="pageData.loading"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="5">
              <el-form-item label="布笼:" label-width="80px" :rules="[{ required: true, message: '布笼必选' }]">
                <el-select v-model="query1.shelveId" @focus="focusShelve1" filterable placeholder="选择布笼"
                  :disabled="!query1.warehouseId || pageData.type == '修改'">
                  <el-option v-for="item in pageData.inShelveList1" :key="item.id" :label="item.shelveName"
                    :value="item.id" :loading="pageData.loading" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="5">
              <el-form-item label-width="80px" label="收货单位" :rules="[{ required: true, message: '收货单位必选' }]"
                prop="putGoodsDepartment">
                <el-input v-model="query1.putGoodsDepartment" />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="5">
              <el-form-item label="车牌号" label-width="75px" prop="carPlate"
                :rules="[{ required: true, message: '车牌号必选' }]">
                <el-input v-model="query1.carPlate" style="width: 200px" />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="5">
                <el-form-item
                  label="坯布编号"
                  label-width="80px"
                  prop="greyCode"
                  :rules="[{ required: true, message: '坯布编号必选' }]"
                >
                  <el-input v-model="query1.greyCode" :disabled="pageData.type == '修改'" />
                </el-form-item>
              </el-col> -->
            <el-col :span="5">
              <el-form-item
                label="日期"
                prop="stockOutDate"
                :rules="[{ required: true, message: '日期必选' }]"
                label-width="60px"
              >
                <el-date-picker
                  type="date"
                  placeholder="选择开始日期"
                  v-model="query1.stockOutDate"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="出库类型" label-width="80px" prop="stockOutType">
                <el-input v-model="query1.stockOutType" disabled style="width: 200px" />
              </el-form-item>
            </el-col>
            <el-button
              :disabled="!query1.warehouseId"
              style="margin-left: 2%"
              @click="inventory"
              type="primary"
              >库存
            </el-button>
            <el-button style="margin-left: 30px" @click="deleteInventory" type="warning"
              >删除</el-button
            >
          </el-row>
        </el-form>
        <encapsulation-agrid
          ref="refgridOption2"
          :configaggrid="configaggrid2"
        ></encapsulation-agrid>
      </div>
    </a-drawer>
    <a-drawer
      popup-container=".page-table-layout"
      cancel-text="关闭"
      ok-text="保存"
      height="90vh"
      placement="bottom"
      :visible="pageData.inventory"
      unmountOnClose
      @cancel="pageData.inventory = false"
      @ok="stockKeeping"
      :mask-closable="false"
      style="z-index: 999"
    >
      <template #title> 库存</template>
      <div style="width: 100%; height: 95%">
        <el-form :model="query" label-width="15px" class="demo-query" status-icon size="default">
          <el-row :gutter="15">
            <el-col :span="4">
              <el-form-item label-width="70px" label="客户" prop="customName">
                <el-input v-model="inventoryQuery.customName" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="织布单号" label-width="70px" prop="planOrderCode">
                <el-input v-model="inventoryQuery.planOrderCode" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="坯布编号" label-width="70px" prop="greyCode">
                <el-input v-model="inventoryQuery.greyCode" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="布笼" label-width="70px" prop="shelveName">
                <el-input v-model="inventoryQuery.shelveName" />
              </el-form-item>
            </el-col>
            <el-button
              style="margin-left: 20px"
              type="primary"
              :icon="Search"
              @click="inventoryGetList"
              >查询
            </el-button>
          </el-row>
        </el-form>
        <encapsulation-agrid
          ref="refgridOption3"
          :configaggrid="configaggrid3"
        ></encapsulation-agrid>
      </div>
    </a-drawer>
    <el-dialog v-model="pageData.printVisibel" title="出库单" width="800">
      <div id="jitdy">
        <div class="contentPrint" v-if="pageData.printList.title[0]">
          <div class="printLeft">
            <div class="printTitle" style="margin-top: 30px"></div>
            <div class="formPrint">
              <div class="ban">收货单位：{{ pageData.printList.title[0].putGoodsDepartment }}</div>
              <div class="ban">收货车牌号码：{{ pageData.printList.title[0].carPlate }}</div>
              <div class="ban">坯布名称：{{ pageData.printList.title[0].greyName }}</div>
              <div class="ban">坯布编码：{{ pageData.printList.title[0].greyCode }}</div>
              <div class="quan">用料成分：{{ pageData.printList.title[0].rawmaterialName }}</div>
              <div class="quan"
                >布笼编号：{{
                  pageData.printList.title[0].shelveCode
                    ? pageData.printList.title[0].shelveCode
                    : ''
                }}
              </div>
            </div>
          </div>
          <div class="printRight">
            <span class="createTime">{{
              pageData.printList.title[0].createTime.slice(0, 10)
            }}</span>
            <div class="ermPrint">
              <svg id="barcode"></svg>
              <!-- <span> {{ pageData.printList.title[0].stockOutCode }}</span> -->
            </div>
            <div class="quan" style="margin-top: -20px"
              >客户：{{ pageData.printList.title.customName }}</div
            >
            <div class="quan">下单部门：</div>
            <div class="quan">批号：{{ pageData.printList.title[0].greyBatchNo }}</div>
          </div>
        </div>
        <div class="tablePrint">
          <table border="1" cellspacing="0" width="33%">
            <tr>
              <th>序号</th>
              <th>机台号-机布号</th>
              <th>验后重量</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) in pageData.detail" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.machineGreyCode }}</td>
              <td>{{ item.weight }}</td>
              <td></td>
            </tr>
          </table>
          <table border="1" cellspacing="0" width="33%">
            <tr>
              <th>序号</th>
              <th>机台号-机布号</th>
              <th>验后重量</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) in pageData.detail1" :key="index">
              <td>{{ 16 + index }}</td>
              <td>{{ item.machineGreyCode }}</td>
              <td>{{ item.weight }}</td>
              <td></td>
            </tr>
          </table>
          <table border="1" cellspacing="0" width="33%">
            <tr>
              <th>序号</th>
              <th>机台号-机布号</th>
              <th>验后重量</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) in pageData.detail2" :key="index">
              <td>{{ 31 + index }}</td>
              <td>{{ item.machineGreyCode }}</td>
              <td>{{ item.weight }}</td>
              <td></td>
            </tr>
          </table>
          <table border="1" cellspacing="0" style="margin-top: -2px" width="100%">
            <tr style="font-weight: 600">
              <td>汇总：</td>
              <td>{{ pageData.listLength }}条 {{ pageData.weight }}KG</td>
            </tr>
            <tr>
              <td>备注：</td>
              <td style="font-weight: 600"></td>
            </tr>
          </table>
        </div>
        <div class="footerPrint">
          <div class="printw">创建人： {{ pageData.printList.title[0].createName }}</div>
          <div class="printw">复核：</div>
          <div class="printw">收货签章：</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="print"> 打印 </el-button>
        </span>
      </template>
    </el-dialog>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  // 引入element提示
  import { ElMessage, ElMessageBox } from 'element-plus'
  //引入封装post
  import { post } from '@/api/http'
  import {
    tableColumns,
    tableColumns1,
    tableColumns2,
    tableColumns3,
  } from './ClothWarehouseOutOfStorage'
  import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader1/index.vue'
  import type { FormInstance } from 'element-plus'
  import printJS from 'print-js'
  import JsBarcode from 'jsbarcode'
  import {
    Upload,
    Search,
    CirclePlus,
    Download,
    Delete,
    Check,
    Printer,
    Edit,
    EditPen,
  } from '@element-plus/icons-vue'

  interface Pagein {
    dataList: any
    dialogFormVisible: boolean
    pageType: string
    showAdd: boolean
    showAdd1: boolean
    inventory: boolean
    loading: boolean
    loading1: boolean
    loadingUp: boolean
    inShelveList: any
    type: string
    upatId: string | Number
    printVisibel: boolean
    printList: any
    selsetionPrint: any
    inShelveList1: any
    detail: any
    detail1: any
    detail2: any
    listLength: string | Number
    weight: string | Number
    inShelveList2: any
    inShelveListOP1: any
  }

  const headerShow = ref(true)

  // 跟请求参数无关的放这里
  let pageData = reactive<any>({
    dataList: [],
    dialogFormVisible: false,
    pageType: '',
    showAdd: false,
    showAdd1: false,
    inventory: false,
    loading: false,
    inShelveList: [],
    loading1: false,
    loadingUp: false,
    type: '',
    upatId: '',
    printVisibel: false,
    printList: {},
    selsetionPrint: [],
    inShelveList1: [],
    detail: [],
    detail1: [],
    detail2: [],
    listLength: 0,
    weight: 0,
    inShelveList2: [],
    inShelveListOP1: [],
    inShelveListOP2: [],
  })
  const focusShelve1 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/shelve/getShelveByPara',
        data: { warehouseId: query1.warehouseId },
      })
      if (code == 200) {
        pageData.inShelveList1 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  //打印
  const print = () => {
    let text = 'cc'
    printJS({
      printable: 'jitdy',
      type: 'html',
      targetStyles: ['*'],
      header: `<div class="printTitle" style="font-size: 22px; font-weight: 700;color:#000;">出库单 （${pageData.printList.title[0].companyName}）</div>`,
      onPrintDialogClose: () => {
        console.log(111)
      },
    })
  }
  const printVisibel = () => {
    pageData.selsetionPrint = refgridOption.value.getSelectedRows()
    if (pageData.selsetionPrint.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    let condition = pageData.selsetionPrint.every(
      (item: any) => item.auditState == 0 || item.auditState == 2
    )
    if (condition) {
      ElMessage.warning(`状态未审核通过不可打印!`)
      return
    }
    let ob = pageData.selsetionPrint.map((o: any) => {
      return o.id
    })
    post({
      url: '/wms/GreyStockOut/getStockOutPrintPDF',
      data: { ids: ob, printType: 3 },
      responseType: 'blob',
    }).then((res: any) => {
      let reader: any = new FileReader()
      reader.readAsDataURL(res)
      reader.onload = function () {
        let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '')
        printJS({ printable: pdfBase64, type: 'pdf', base64: true })
      }
    })
  }
  // const printVisibel = async () => {
  //   pageData.selsetionPrint = refgridOption.value.getSelectedRows()
  //   if (pageData.selsetionPrint.length == 0) {
  //     ElMessage.warning('请选择您的单据')
  //     return
  //   }
  //   let condition = pageData.selsetionPrint.every(
  //     (item: any) => item.auditState == 0 || item.auditState == 2
  //   )
  //   if (condition) {
  //     ElMessage.warning(`状态未审核通过不可打印!`)
  //     return
  //   }
  //   try {
  //     pageData.loadingUp = true
  //     let { code, data, message } = await post({
  //       url: 'wms/GreyStockOut/getStockOutPrint ',
  //       data: {
  //         id: pageData.selsetionPrint[0].id,
  //       },
  //     })
  //     if (code == 200) {
  //       pageData.printList = data
  //       pageData.detail2 = []
  //       pageData.detail1 = []
  //       pageData.detail = []
  //       console.log(data)
  //       pageData.weight = data.detail.reduce((pve: any, cur: any) => {
  //         return (pve += cur.weight)
  //       }, 0)
  //       pageData.listLength = data.detail.length
  //       if (pageData.printList.detail.length > 0 && pageData.printList.detail.length > 15) {
  //         pageData.detail = pageData.printList.detail.slice(0, 15)
  //       }
  //       if (pageData.printList.detail.length <= 15) {
  //         pageData.detail = pageData.printList.detail
  //         for (var i = pageData.detail.length; i < 15; i++) {
  //           pageData.detail.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //         for (pageData.detail.length; pageData.detail1.length < 15; i++) {
  //           pageData.detail1.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //         for (var i = 1; i <= 15; i++) {
  //           pageData.detail2.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //       }
  //       if (pageData.printList.detail.length > 15 && pageData.printList.detail.length < 80) {
  //         pageData.detail1 = pageData.printList.detail.slice(15, pageData.printList.detail.length)
  //         for (var i = 1; i <= 15; i++) {
  //           pageData.detail2.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //         for (pageData.detail1.length; pageData.detail1.length < 15; i++) {
  //           pageData.detail1.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //       }
  //       if (pageData.printList.detail.length > 15 && pageData.printList.detail.length >= 80) {
  //         pageData.detail1 = pageData.printList.detail.slice(15, 80)
  //       }
  //       if (pageData.printList.detail.length > 80 && pageData.printList.detail.length < 120) {
  //         pageData.detail2 = pageData.printList.detail.slice(80, pageData.printList.detail.length)
  //         for (var i = pageData.detail2.length; i < 15; i++) {
  //           pageData.detail2.push({
  //             machineCode: '',
  //             weight: 0,
  //           })
  //         }
  //       }
  //       if (pageData.printList.detail.length > 80 && pageData.printList.detail.length >= 120) {
  //         pageData.detail2 = pageData.printList.detail.slice(80, 120)
  //       }
  //       pageData.loadingUp = false
  //       pageData.printVisibel = true
  //       nextTick(() => {
  //         JsBarcode('#barcode', String(pageData.printList.title[0].stockOutCode), {
  //           format: 'CODE39', //选择要使用的条形码类型
  //           displayValue: true, //是否在条形码下方显示文字
  //           fontOptions: 'bold', //使文字加粗体或变斜体
  //           fontSize: 35,
  //         })
  //       })
  //       return
  //     }
  //     ElMessage.error(message)
  //   } finally {
  //     pageData.loadingUp = false
  //   }
  // }
  interface Querin {
    stockOutCode: Number | String
    customName: Number | String
    customOrderCode: Number | String
    carPlate: Number | String
    stockOutType: Number | String
    companyName: Number | String
    companyId: Number | String
    warehouseName: Number | String
    warehouseTypeName: String
  }

  const form = ref<any>({})
  //getlist初始化接口参数
  let query = reactive<any>({
    stockOutCode: '',
    customName: '',
    customOrderCode: '',
    carPlate: '',
    stockOutType: '',
    companyName: '',
    companyId: '',
    warehouseName: '',
    warehouseTypeName: '',
  })

  interface Querin1 {
    companyId: Number | String
    warehouseId: Number | String
    putGoodsDepartment: Number | String
    carPlate: Number | String
    stockOutType: Number | String
    stockOutDate: Number | String
    warehouseName: Number | String
    shelveId: Number | String
    shelveName: Number | String
    greyCode: Number | String
    warehouseTypeName: string
  }

  //库存初始化接口参数
  let query1 = reactive<Querin1>({
    companyId: '',
    putGoodsDepartment: '',
    carPlate: '',
    warehouseId: '',
    stockOutType: '坯布调拨出库',
    stockOutDate: '',
    companyName: '',
    warehouseName: '',
    shelveId: '',
    greyCode: '',
    shelveName: '',
    warehouseTypeName: '',
    deliveryCompanyId: '',
    deliveryCompanyName: '',
    deliveryWarehouseId: '',
    deliveryWarehouseName: '',
    deliveryWarehouseTypeName: '',
  })

  interface Querin1 {
    companyId: Number | String
    warehouseId: Number | String
    putGoodsDepartment: Number | String
    carPlate: Number | String
    stockOutType: Number | String
    companyName: Number | String
    deliveryCompanyName: any
    deliveryCompanyId: any
    deliveryWarehouseId: any
    deliveryWarehouseName: any
    deliveryWarehouseTypeName: any
  }

  interface inventoryQuery {
    customName: Number | String
    planOrderCode: Number | String
    greyCode: Number | String
    companyId: Number | String
    shelveName: Number | String
    warehouseId: Number | String
    // notInIdList: any
    stockState: Number | String
  }

  //库存初始化接口参数
  let inventoryQuery = reactive<inventoryQuery>({
    customName: '',
    planOrderCode: '',
    greyCode: '',
    companyId: '',
    shelveName: '',
    warehouseId: '',
    // notInIdList: [],
    stockState: 1,
  })

  // loding.....
  let loadingElplus = ref<boolean>(false)
  const splitAdjustment = () => {
    let selsetionList = refgridOption1.value.getSelectedRows()
    if (selsetionList.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    // let condition = selsetionList.every(
    //     (item: lx) =>
    //       item.completeState == 0 && item.completeState === selsetionList[0].completeState
    //   )
    //   if (!condition) {
    //     ElMessage.warning('请选择处理状态为未完成的单据')
    //     return
    //   }
    //   form.value = selsetionList[0]
    pageData.dialogFormVisible = true
  }
  tableColumns.push({
    headerName: '操作',
    field: 'action',
    resizable: 'false',
    filter: 'false',
    sortable: 'false',
    width: 90,
    // lockPosition: 'right',
    pinned: 'right',
    cellRenderer: buttionRender,
    cellRendererParams: {
      buttonList: [
        {
          type: 'success',
          text: '明细',
          typeName: 'el-button',
          show: true,
          Callback: (data: any) => {
            pageData.showAdd = true
            nextTick(() => {
              refgridOption1.value.setQuery({ stockOutId: data.id })
            })
          },
        },
      ],
      eltagSize: 0,
    },
  })
  const changeCascader2 = (data: any) => {
    const { corporateId, corporateLabel } = data
    query.warehouseName = ''
    query.companyName = corporateLabel
    query.companyId = corporateId
    focusShelve2()
  }
  const focusShelve2 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: { firmId: query.companyId, warehouseTypeName: '坯布仓', virtuallyState: 0 },
      })
      if (code == 200) {
        pageData.inShelveList2 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const configCascader2 = ref<{}>({
    corporateWidth: '200px', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
  })
  let refgridOption = ref<any>()
  let refgridOption1 = ref<any>()
  let refgridOption2 = ref<any>()
  let refgridOption3 = ref<any>()
  let configaggrid = ref({
    url: 'wms/GreyStockOut/getPage', //接口路径
    queryData: {
      //接口参数
      stockOutCode: query.stockOutCode,
      customName: query.customName,
      customOrderCode: query.customOrderCode,
      carPlate: query.carPlate,
      stockOutType: query.stockOutType,
      // warehouseTypeName: '坯布仓',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接口
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
    fileName: 'ClothWarehouseOutOfStorage-1',
  })
  let configaggrid1 = ref({
    url: 'wms/GreyStockOutDetail/getList', //接口路径
    queryData: {
      warehouseTypeName: '坯布仓',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: false, //是否调用接口
    rowMultiSelectWithClick: false, //点击行是否多选
    column: tableColumns1,
    fileName: 'ClothWarehouseOutOfStorage-2',
  })
  let configaggrid2 = ref({
    url: '', //接口路径
    paginationShow: false, //分页是否显示
    invokeiIterface: false, //是否调用接口
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns2,
    fileName: 'ClothWarehouseOutOfStorage-3',
    queryData: {
      warehouseTypeName: '坯布仓',
    },
  })
  let configaggrid3 = ref({
    url: 'wms/GreyStock/getPage', //接口路径
    queryData: {
      //接口参数
      companyId: query1.companyId,
      warehouseId: query1.warehouseId,
      customName: inventoryQuery.customName,
      planOrderCode: inventoryQuery.planOrderCode,
      greyCode: inventoryQuery.greyCode,
      shelveName: inventoryQuery.shelveName,
      warehouseTypeName: '坯布仓',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: false, //是否调用接口
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns3,
    fileName: 'ClothWarehouseOutOfStorage-4',
  })
  const configCascader = ref<{}>({
    corporateWidth: '186px', //公司宽度
    corporateRquired: true, //公司是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '收货公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
    corporateNameLabelWidth: '80px',
  })
  const changeCascader = (data: any) => {
    const { corporateId, corporateLabel } = data
    query1.deliveryWarehouseName = ''
    query1.deliveryWarehouseId = ''
    query1.deliveryCompanyId = corporateId
    query1.deliveryCompanyName = corporateLabel
  }
  const save = async () => {
    try {
      loadingElplus.value = true
      let { code, data, message } = await post({
        url:
          pageData.pageType == 'split'
            ? '/wms/GreyStock/stockSplit'
            : 'wms/GreyStockAdjust/stockAdjust',
        data: form.value,
      })
      if (code == 200) {
        pageData.dataList = data.list
        loadingElplus.value = false
        return
      }
      ElMessage.error(message)
    } finally {
      loadingElplus.value = false
    }
  }
  const focusShelve = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara ',
        data: { firmId: query1.companyId, warehouseTypeName: '坯布仓', virtuallyState: 0 },
      })
      if (code == 200) {
        pageData.inShelveList = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const focusShelveOP1 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara ',
        data: {
          firmId: query1.deliveryCompanyId,
          warehouseTypeName: query1.deliveryWarehouseTypeName,
          virtuallyState: 0,
        },
      })
      if (code == 200) {
        pageData.inShelveListOP1 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const focusShelveOP2 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouseType/getWarehoursTypePara',
        data: { deleteState: 0 },
      })
      if (code == 200) {
        pageData.inShelveListOP2 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const changeOP = () => {
    pageData.inShelveListOP1.forEach((item: any) => {
      if (query1.deliveryWarehouseId == item.id) {
        query1.deliveryWarehouseName = item.warehouseName
      }
    })
  }
  const changeOP1 = () => {
    query1.deliveryWarehouseId = ''
  }
  let stockOutDetailList = ref([])

  const audit = async () => {
    let selsetionList = refgridOption.value.getSelectedRows()
    if (selsetionList.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    ;[]
    let arr: any
    arr = []
    selsetionList.map((item: any) => {
      arr.push({
        id: item.id,
        auditState: 1,
      })
    })
    ElMessageBox.confirm('是否审核通过?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        try {
          pageData.loadingUp = true
          let { code, message } = await post({
            url: 'wms/GreyStockOut/setAudit',
            data: arr,
          })
          if (code == 200) {
            ElMessage.success('审核成功')
            pageData.loadingUp = false
            refgridOption.value.setQuery(query)
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loadingUp = false
        }
      })
      .catch(() => {})
  }
  //库存保存

  const stockKeeping = () => {
    let arr3 = refgridOption3.value.getSelectedRows()
    if (arr3.length == 0) {
      ElMessage.warning('请勾选您要选择的库存')
      return
    }
    let arr2 = refgridOption2.value.getListData()
    arr3.map((item: any) => {
      item.stockId = item.id
      item.id = ''
      arr2.push(item)
    })
    stockOutDetailList.value = arr2
    refgridOption2.value.setdataListIterface(arr2)
    pageData.inventory = false
  }
  const ruleFormRef = ref<FormInstance>()

  //新增/修改库存
  const addInventory = async (formEl: FormInstance | undefined) => {
    if (pageData.type == '修改') {
      refgridOption2.value.getListData().map((item: any) => {
        item.stockOutId = pageData.upatId
      })
      try {
        pageData.loading1 = true
        let { code, message } = await post({
          url: '/wms/GreyStockOut/updateList',
          data: {
            stockOutDate: query1.stockOutDate,
            stockOutType: query1.stockOutType,
            stockOutTypeId: 31,
            putGoodsDepartment: query1.putGoodsDepartment,
            companyId: query1.companyId,
            companyName: query1.companyName,
            warehouseId: query1.warehouseId,
            warehouseName: query1.warehouseName,
            carPlate: query1.carPlate,
            shelveId: query1.shelveId,
            shelveName: query1.shelveName,
            greyCode: query1.greyCode,
            warehouseTypeName: query1.warehouseTypeName,
            remark: '',
            deliveryCompanyId: query1.deliveryCompanyId,
            deliveryCompanyName: query1.deliveryCompanyName,
            deliveryWarehouseId: query1.deliveryWarehouseId,
            deliveryWarehouseName: query1.deliveryWarehouseName,
            deliveryWarehouseTypeName: query1.deliveryWarehouseTypeName,
            id: pageData.upatId,
            greyStockOutDetail: refgridOption2.value.getListData(),
          },
        })
        if (code == 200) {
          ElMessage.success('修改成功')
          pageData.loading1 = false
          refgridOption.value.setQuery(query)
          pageData.showAdd1 = false
          return
        }
        ElMessage.error(message)
      } finally {
        pageData.loading1 = false
      }
      return
    }
    if (!formEl) return
    if (stockOutDetailList.value.length == 0) {
      ElMessage.warning('请选择库存列表')
      return
    }
    let warehouseName = ''
    let shelveName = ''
    let warehouseTypeName = ''
    pageData.inShelveList.reduce((pre: any, cur: any) => {
      if (cur.id == query1.warehouseId) {
        warehouseName = cur.warehouseName
        warehouseTypeName = cur.warehouseTypeName
      }
    }, [])
    pageData.inShelveList1.reduce((pre: any, cur: any) => {
      if (cur.id == query1.shelveId) {
        shelveName = cur.shelveName
      }
    }, [])
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        let object = {
          stockOutDate: query1.stockOutDate,
          stockOutType: query1.stockOutType,
          stockOutTypeId: 31,
          putGoodsDepartment: query1.putGoodsDepartment,
          companyId: query1.companyId,
          companyName: query1.companyName,
          warehouseId: query1.warehouseId,
          warehouseName: warehouseName,
          carPlate: query1.carPlate,
          shelveId: query1.shelveId,
          shelveName: shelveName,
          greyCode: query1.greyCode,
          warehouseTypeName: warehouseTypeName,
          remark: '',
          greyStockOutDetail: stockOutDetailList.value,
          deliveryCompanyId: query1.deliveryCompanyId,
          deliveryCompanyName: query1.deliveryCompanyName,
          deliveryWarehouseId: query1.deliveryWarehouseId,
          deliveryWarehouseName: query1.deliveryWarehouseName,
          deliveryWarehouseTypeName: query1.deliveryWarehouseTypeName,
        }
        try {
          pageData.loading1 = true
          let { code, message } = await post({
            url: 'wms/GreyStockOut/insertList',
            data: object,
          })
          if (code == 200) {
            ElMessage.success('新增成功')
            pageData.loading1 = false
            refgridOption.value.setQuery(query)
            pageData.showAdd1 = false
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loading1 = false
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  //库存弹窗
  const inventory = () => {
    // if (!query1.companyId) {
    //   ElMessage.warning('请选择公司')
    //   return
    // }
    // if (!query1.warehouseId) {
    //   ElMessage.warning('请选择出库')
    //   return
    // }
    pageData.inventory = true
    inventoryGetList()
  }
  const inventoryGetList = () => {
    nextTick(() => {
      let inventoryQuery1: any = inventoryQuery
      // inventoryQuery1.companyId = query1.companyId
      // inventoryQuery1.warehouseId = query1.warehouseId
      let dataSelect = refgridOption2.value.getListData()
      console.log(dataSelect)

      let ids = dataSelect.reduce((pre: any, cur: any) => {
        return pre.concat(cur.clothfiyCode)
      }, [])
      inventoryQuery1.notInCodeList = ids
      inventoryQuery1.warehouseId = query1.warehouseId
      refgridOption3.value.setQuery(inventoryQuery1)
    })
  }
  const deleteData = () => {
    const selectedData = refgridOption.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要删除的单据')
      return
    }
    let condition = selectedData.every((item: any) => item.auditState == 1)
    if (condition) {
      ElMessage.warning('状态为审核通过不可删除!')
      return
    }
    ElMessageBox.confirm('确认删除选中单据?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        try {
          pageData.loadingUp = true
          let arr: any
          arr = []
          selectedData.map((item: any) => {
            arr.push(item.id)
          })
          let { code, message } = await post({
            url: 'wms/GreyStockOut/delete',
            data: arr,
          })
          if (code == 200) {
            ElMessage.success('审核成功')
            pageData.loadingUp = false
            refgridOption.value.setQuery(query)
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loadingUp = false
        }
      })
      .catch(() => {})
  }
  //删除库存
  const deleteInventory = () => {
    const selectedData = refgridOption2.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要删除的单据')
      return
    }
    ElMessageBox.confirm('确认删除选中单据?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        refgridOption2.value.applyTransaction({ remove: selectedData })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {})
  }
  const cascaderRef = ref()
  //修改
  const modify = async () => {
    let selsetionList = refgridOption.value.getSelectedRows()
    if (selsetionList.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    console.log(selsetionList)
    let condition = selsetionList.every((item: any) => item.auditState == 1)
    if (condition) {
      ElMessage.warning('状态为审核通过不可修改!')
      return
    }
    focusShelve()
    const {
      stockOutType,
      putGoodsDepartment,
      stockOutDate,
      warehouseName,
      carPlate,
      companyId,
      companyName,
      warehouseId,
      id,
      shelveName,
      shelveId,
      warehouseTypeName,
    } = selsetionList[0]
    query1.stockOutDate = stockOutDate
    query1.stockOutType = stockOutType
    query1.putGoodsDepartment = putGoodsDepartment
    query1.companyId = companyId
    query1.companyName = companyName
    query1.warehouseId = warehouseId
    query1.warehouseName = warehouseName
    query1.carPlate = carPlate
    query1.shelveName = shelveName
    query1.shelveId = shelveId
    query1.warehouseTypeName = warehouseTypeName
    pageData.upatId = id
    pageData.type = '修改'
    try {
      pageData.loadingUp = true
      let { code, data, message } = await post({
        url: 'wms/GreyStockOutDetail/getList',
        data: { stockOutId: selsetionList[0].id },
      })
      if (code == 200) {
        pageData.loadingUp = false
        pageData.showAdd1 = true
        nextTick(() => {
          let data1 = {
            sectorId: '',
            sectorLabel: '',
            corporateId: companyId,
            corporateLabel: companyName,
          }
          cascaderRef.value.parentComponent(data1)
          cascaderRef.value.setcorDisabled(true)
          refgridOption2.value.setdataListIterface(data)
        })
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loadingUp = false
    }
  }
  //新增库存
  const newDelivery = () => {
    query1.companyId = ''
    query1.putGoodsDepartment = ''
    query1.carPlate = ''
    query1.warehouseId = ''
    query1.stockOutDate = ''
    query1.companyName = ''
    query1.warehouseName = ''
    query1.shelveId = ''
    query1.shelveName = ''
    query1.deliveryCompanyId = ''
    query1.deliveryCompanyName = ''
    query1.deliveryWarehouseId = ''
    query1.deliveryWarehouseName = ''
    query1.deliveryWarehouseTypeName = ''
    pageData.showAdd1 = true
    pageData.type = '新增'
    acquisitionCompany()
    // refgridOption2.value.setQuery(query)
    nextTick(() => {
      cascaderRef.value.setcorDisabled(false)
    })
  }
  const acquisitionCompany = async () => {
    try {
      pageData.loadingUp = true
      let { code, message, data } = await post({
        url: 'admin/acl/user/findUserToken',
      })
      if (code == 200) {
        const { firmId, firmName } = data.data
        query1.companyId = firmId
        query1.companyName = firmName
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loadingUp = false
    }
  }
  //获取数据
  const getList = async () => {
    pageData.upatId = ''
    refgridOption.value.setQuery(query)
  }

  //初始化
  onMounted(() => {
    //   getList()
  })
</script>
<script lang="ts">
  export default defineComponent({
    name: 'ClothWarehouseOutOfStorage',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }

  .contentPrint {
    width: 100%;
    display: flex;
    justify-content: space-between;

    color: #000 !important;
  }

  .printLeft {
    width: 56%;
  }

  .printTitle {
    font-size: 22px;
    font-weight: 700;
  }

  .printRight {
    width: 43%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ermPrint {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: center;
  }

  .erm {
    width: 160px;
    height: 50px;
    background: #999;
  }

  .formPrint {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ban {
    width: 50%;
    margin-bottom: 5px;
  }

  .quan {
    width: 100%;
    margin-bottom: 5px;
  }

  table {
    text-align: center;
    color: #000;
  }

  td {
    color: #000;
  }

  th {
    color: #000;
  }

  .tablePrint {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    flex-flow: row wrap;
  }

  .footerPrint {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    color: #000;
  }

  .createTime {
    width: 100px;
  }

  .printw {
    width: 30%;
    margin-bottom: 5px;
  }

  :deep(.el-dialog__body) {
    color: #000;
  }

  #barcode {
    width: 200px !important;
    height: 50px !important;
    font-weight: 500;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
